<template>
	<!-- 选择银行卡卡片组件 -->
	<view class="add-account-card-container">
		<!-- 每个大卡片盒子 (包含标题、对应账户类型) -->
		<view class="add-account-container" v-for="(item, index) in accountList" :key="index">
			<!-- 标题 -->
			<view class="add-account-title">{{item.name}}</view>
			<!-- 对应账户类型 -->
			<view class="add-account-content-container" v-for="(item1, index1) in item.list" :key="index1" @click="selectBank(index, index1)">
				<view :class="['add-account-content-left-icon', 'iconfont', item1.icon]" :style="{color: item1.color}"></view>
				<view class="add-account-content-inner-name">{{item1.name}}</view>
			</view>
<!-- 			<view class="add-account-content-container">
				<view class="add-account-content-left-icon iconfont icon-aomenshangye" :style="{color: '#3f7570'}"></view>
				<view class="add-account-content-inner-name">测试</view>
			</view>
			<view class="add-account-content-container">
				<view class="add-account-content-left-icon iconfont  icon-huishangyinhang" :style="{color: '#3f7570'}"></view>
				<view class="add-account-content-inner-name">测试</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	export default {
		props: {
		},
		data() {
			return {
				accountList: [],
			};
		},
		methods: {
			/** 点击图标事件
			 * @param {Object} index1 对应银行卡账户的下标（集合）
			 * @param {Object} index2 对应银行卡账户下标的集合下标（图标元素）
			 */
			selectBank(index1, index2) {
				this.$emit("selectBank", index1, index2);
			}
		},
		mounted(){
			this.accountList = this.accountArr;
	
		},
	};
</script>
<style lang="scss">
	.add-account-card-container {
		width: 100%;
		min-height: 500rpx;
		
		.add-account-container {
			width: 100%;
			box-sizing: border-box;
			
			
			.add-account-title {
				width: 100%;
				height: 80rpx;
				text-align: left;
				color: $themePurpleColor;
				line-height: 80rpx;
			}
			.add-account-content-container {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				.add-account-content-left-icon {
					width: 10%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 45rpx;
					margin-right: 20rpx;
					text-align: left;
				}
				.add-account-content-inner-name {
					
				}
			}
		}
	}
</style>
